<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col group">
			<view class="fun-flex-col">
				<view class="fun-flex-row fun-justify-between fun-items-center fun-self-stretch section">
					<view class="fun-flex-row fun-items-center left-input">
						<image class="fun-shrink-0 image_4" src="../../static/dfbc9d3b58d94f7648a06a6d1280463a.png" />
						<input class="font text_3 text_4 ml-5" placeholder="Please enter product keywords"/>
					</view>
					<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper">
						<text class="font_2 text_5">Search</text>
					</view>
				</view>
				<view class="fun-flex-col fun-self-stretch">
					<view class="fun-flex-row fun-items-center fun-justify-between group_3">
						<text class="font_3 text_6" @click="searchVal = 'Stocks'" :class="searchVal == 'Stocks' ? 'active' : ''">Stocks</text>
						<text class="font_3 text_3 text_7" @click="searchVal = 'Bonds'" :class="searchVal == 'Bonds' ? 'active' : ''">Bonds</text>
						<text class="font_3 text_3 text_8" @click="searchVal = 'Crypto'" :class="searchVal == 'Crypto' ? 'active' : ''">Crypto</text>
						<text class="font_3 text_3 text_9" @click="searchVal = 'ETFs'" :class="searchVal == 'ETFs' ? 'active' : ''">ETFs</text>
					</view>
					<view class="fun-flex-col fun-items-start fun-relative group_4">
						<view class="group_6 view"></view>
						<view class="group_6"></view>
						<view class="group_6"></view>
						<view class="group_6"></view>
						<view class="fun-flex-col pos">
							<view class="fun-flex-col fun-mt-16 list-item" v-for="(item, index) in items" :key="index" @click="toDetail">
								<view class="fun-flex-row fun-justify-between fun-items-center group_5">
									<view class="fun-flex-row fun-items-center">
										<text class="font_4 text_10">U.S.</text>
										<text class="font_4 text_11 ml-5">Growth Equity</text>
									</view>
									<text class="font_5">Ticker：10109</text>
								</view>
								<view class="fun-flex-row fun-justify-between group_7 equal-division">
									<view class="fun-flex-col fun-items-start equal-division-item">
										<text class="font_5 text_12">Expected Yield:</text>
										<text class="font_6 mt-11">18%</text>
									</view>
									<view class="fun-flex-col fun-items-start group_8 equal-division-item">
										<text class="font_5 text_13">Minimum Investment:</text>
										<text class="fun-mt-12 font_4">$200,000</text>
									</view>
								</view>
								<view class="divider view_2"></view>
								<view class="fun-flex-row fun-justify-between fun-items-center group_9">
									<text class="font_5">Status:Pre-sale</text>
									<text class="font">Lock-up period： 3 Months</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				searchVal:'Stocks',
				items: [null, null, null, null],
			};
		},

		methods: {
			toDetail(){
				uni.navigateTo({url:`/pages/selectedProducts/productDetail?title=U.S.Growth Equity`})
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}

	.mt-63 {
		margin-top: 126rpx;
	}

	.mt-9 {
		margin-top: 18rpx;
	}

	.page {
		padding: 32rpx 32rpx 128rpx 32rpx;
		background-color: #00033b;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.group {
			.group_2 {
				padding-left: 36rpx;

				.text {
					color: #ffffff;
					font-size: 30rpx;
					font-family: SF Pro Text;
					font-weight: 600;
					line-height: 22.18rpx;
				}

				.image {
					width: 34rpx;
					height: 22rpx;
				}

				.image_2 {
					width: 30rpx;
					height: 22rpx;
				}

				.image_3 {
					width: 48rpx;
					height: 22.66rpx;
				}
			}

			.text_2 {
				color: #ffffff;
				font-size: 32rpx;
				font-family: SF Pro Display;
				font-weight: 300;
				line-height: 23.26rpx;
			}

			.section {
				padding: 8rpx 8rpx 8rpx 24rpx;
				background-color: #1b1d53;
				border-radius: 32rpx;
				.left-input{
					flex: 1;
				}
				.image_4 {
					opacity: 0.5;
					width: 32rpx;
					height: 32rpx;
				}

				.text_4 {
					width: 100%;
				}

				.text-wrapper {
					padding: 16rpx 0;
					background-color: #5ceec4;
					border-radius: 28rpx;
					width: 96rpx;
					height: 48rpx;

					.text_5 {
						color: #000000;
						line-height: 14.56rpx;
					}
				}
			}

			.group_3 {
				padding: 32rpx 0;
				.font_3 {
					padding: 10rpx 24rpx;
					border-radius: 24rpx;
					color: #999;
					font-size: 24rpx;
					font-family: SF Pro Display;
				}
				.active{
					background-color: #ffffff80;
					border: solid 2rpx #ffffff;
					color: #fff;
				}	
			}

			.group_4 {
				padding: 62rpx 14rpx 192rpx;

				.group_6 {
					margin-top: 286rpx;
					filter: blur(3.5rpx);
					width: 214rpx;
					height: 8rpx;
				}

				.view {
					margin-top: 0;
				}

				.pos {
					position: absolute;
					left: 0;
					right: 2.66rpx;
					top: 0;
					bottom: 0;

					.list-item {
						padding-top: 28rpx;
						background-color: #1b1d53;
						border-radius: 16rpx;

						&:first-child {
							margin-top: 0;
						}

						.group_5 {
							padding-left: 24rpx;
							padding-right: 16rpx;

							.text_10 {
								line-height: 20.4rpx;
							}

							.text_11 {
								line-height: 20.4rpx;
							}
						}

						.group_7 {
							margin-top: 32rpx;

							.equal-division-item {
								padding: 12rpx 0;

								.text_12 {
									line-height: 14.26rpx;
								}

								.font_6 {
									font-size: 28rpx;
									font-family: SF Pro Display;
									line-height: 20.6rpx;
									font-weight: 700;
									color: #5ceec4;
								}
							}

							.group_8 {
								margin-right: 132rpx;

								.text_13 {
									line-height: 14.26rpx;
								}
							}
						}

						.equal-division {
							padding: 0 24rpx;
						}

						.font_4 {
							font-size: 28rpx;
							font-family: SF Pro Display;
							line-height: 20.6rpx;
							font-weight: 700;
							color: #ffffff;
						}

						.divider {
							background-color: #ffffff33;
							height: 2rpx;
						}

						.view_2 {
							margin: 16rpx 24rpx 0;
						}

						.group_9 {
							padding: 28rpx 12rpx 24rpx 24rpx;
						}
					}
				}
			}

			.font {
				font-size: 20rpx;
				font-family: SF Pro Display;
				font-weight: 300;
				color: #ffffff;
			}
		}

		.section_2 {
			background-color: #1b1d53;
			height: 85.3rpx;
			border-top: solid 2rpx #00000012;

			.group_13 {
				flex: 1 1 187.5rpx;

				.image_5 {
					width: 48rpx;
					height: 48rpx;
				}

				.text_22 {
					color: #8d8ea9;
					font-size: 18rpx;
					line-height: 12.86rpx;
				}

				.text_23 {
					font-size: 18rpx;
					line-height: 13.08rpx;
				}

				.text_24 {
					font-size: 18rpx;
					line-height: 15.98rpx;
				}

				.text_25 {
					font-size: 18rpx;
					line-height: 15.98rpx;
				}
			}

			.equal-division-item_2 {
				padding: 4rpx 0 16rpx;
			}
		}

		.font_2 {
			font-size: 20rpx;
			font-family: SF Pro Display;
			line-height: 14.54rpx;
		}

		.font_5 {
			font-size: 20rpx;
			font-family: SF Pro Display;
			line-height: 14.54rpx;
			font-weight: 300;
			color: #ffffff;
		}
	}
</style>